<template>
  <div class="home-page">
    <div class="container">
      <h3 class="title">训练计划 ></h3>
      <div class="cards-container">
        <div class="cards" v-for="(item, index) in trainingList" :key="index" @click="() => {
          router.push({
            path: `/home/training-detail/${item.id}`
          })
        }">
          <div class="img">
            <img class="imgg" src="../../../assets/images/cover.png" alt="">
          </div>
          <div class="text">
            <div class="top">{{ item.title }}</div>
            <div class="bottom">{{ item.description }}</div>
          </div>
        </div>
      </div>
      <div class="discussion">
        <h3 class="title">讨论区 ></h3>
        <div>
          <discussionVue v-for="(item, index) in allDiscussion" :key="index" :discussion="item"></discussionVue>
        </div>
      </div>
      <div class="pagination">
        <el-pagination class="no-background" layout="prev, pager, next" :page-count="parseInt(pageCount)"
          v-model:current-page="pageNum" v-model:page-size="pageSize" :hide-on-single-page="true" @change="changePage">
        </el-pagination>
      </div>
    </div>
    <div class="right">
      <div class="rightBar">
        <div class="dayly" style="color:rgb(27, 163, 255)">
          <i class="iconfont icon-rili"></i>
          每日一题
        </div>
        <div class="randomProblem" @click="() => {
          router.push({
            path: `/home/bank/${dailyProblem.id}`,
          })
        }">{{ `${dailyProblem.problemId || '--'}.${dailyProblem.title || '--'}` }}</div>
      </div>
      <div class="rightBar">
        <div class="dayly" style="color:rgb(0, 212, 43);">
          <i class="iconfont icon-suijibofang"></i>
          随机一题
        </div>
        <div class="randomProblem" @click="() => {
          router.push({
            path: `/home/bank/${randomProblem.id}`,
          })
        }">{{ `${randomProblem.problemId || '--'}.${randomProblem.title || '--'}` }}</div>
      </div>
      <div class="rightBar">
        <div class="dayly" style="color:#ffa116;">
          <i class="iconfont  icon-gongsijianjie"></i>
          训练计划
        </div>
        <div class="training" @click="() => {
          router.push({
            path: `/home/training-detail/${item.id}`
          })
        }" v-for="(item, index) in trainingList" :key="index">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import discussionVue from "@/components/ojComponents/discuss/discussion/discussion.vue"
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  getDiscussAPI, randomAProblemAPI, dailyAProblemAPI, getTrainingListAPI
} from "@/api/ojAPI/ojAPI"

const allDiscussion = ref([])
const pageNum = ref(1)
const pageSize = ref(3)
const pageCount = ref(0)
const randomProblem = ref({})
const dailyProblem = ref({})
const router = useRouter()
const getRandomProblem = async () => {
  await randomAProblemAPI()
    .then((res) => {
      if (res.data.code === 200) {
        randomProblem.value = res.data.data
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

const getDailyProblem = async () => {
  await dailyAProblemAPI()
    .then((res) => {
      if (res.data.code === 200) {
        dailyProblem.value = res.data.data
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

const trainingList = ref([])
const getTrainingList = async () => {
  await getTrainingListAPI({
    pageNum: 1,
    pageSize: 3,
    title: '',
    categoryId: '',
    auth: ''
  }).then(res => {
    if (res.data.data.records && res.data.data.records.length > 0) {
      trainingList.value = res.data.data.records
    } else {
      // 赋值一个默认的空数据
      trainingList.value = [{
        id: '',
        title: '暂无训练计划',
        description: '当前没有可用的训练计划，请稍后再试'
      }, {
        id: '',
        title: '暂无训练计划',
        description: '当前没有可用的训练计划，请稍后再试'
      }, {
        id: '',
        title: '暂无训练计划',
        description: '当前没有可用的训练计划，请稍后再试'
      }]
    }
  })
}

onMounted(() => {
  getRandomProblem()
  getDailyProblem()
  getTrainingList()
})
let deboundTime = null


const changePage = (page) => {
  if (deboundTime) {
    clearTimeout(deboundTime)
  }
  deboundTime = setTimeout(() => {
    pageNum.value = page
    getDiscuss()
  }, 300)
}

const getDiscuss = async () => {
  const data = {
    pageSize: pageSize.value,
    pageNum: pageNum.value,
    like: '',
    categoryId: [],
    tagList: [],
    pid: "",
  }
  try {
    await getDiscussAPI(data)
      .then((res) => {
        if (res.data.code === 200) {
          allDiscussion.value = res.data.data.records
          pageCount.value = res.data.data.pages
        }
      })
      .catch((err) => {
        console.log(err)
      })
  } catch (err) {
    console.log(err)
  }

}
onMounted(() => {
  getDiscuss()
})
</script>

<style lang="less" scoped>
.home-page {
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-around;
}

.randomProblem {
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  white-space: nowrap;
}

.container {

  .title {
    margin: 2rem 0;
  }

  .cards-container {
    display: flex;

    .cards {
      display: flex;
      cursor: pointer;

      .img {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        overflow: hidden;

        .imgg {
          width: 80px;
          height: 80px;
        }
      }

      .text {
        display: flex;
        flex-direction: column;
        padding: 2px 0.5rem;
        justify-content: space-between;

        .top {
          font-weight: 550;
          width: 180px;
          font-size: 18px;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .bottom {
          width: 200px;
          white-space: wrap;
          color: #767676;
          word-break: break-all;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .pagination {
    border-radius: 8px;
    display: flex;
    justify-content: center;
  }
}

.right {
  padding: 2rem 0;

  .rightBar {
    margin-bottom: 0.8rem;
    padding: 10px;
    min-width: 200px;
    border-radius: 8px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1),
      -1px -1px 5px rgba(0, 0, 0, 0.1);
  }

  .dayly {
    font-weight: 550;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }
}

.training {
  cursor: pointer;
}
</style>